<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创作中心</title>
    <style>
    body {
        height:100vh;
        display:flex;
        flex-direction:column;/*主轴设置垂直方向，垂直居中*/
        align-items:center;
        justify-content:center;
        background-color: rgba(150, 200, 255, 0.3);
    }
    .who{
        color:red;
        padding-bottom:40px;
    }
    .record{
        padding: 50px 0;
        width: 400px;
        height: 200px;
        background-color: rgba(150, 200, 255, 0.8);
        border-radius: 10px;
    }
    .record .row {
        height:50px;
        padding:10px 0px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .record .row span {
        display: block;
        width: 100px;
        font-weight: 700;
    }

    #title,#track {
        width: 220px;
        height: 40px;
        line-height: 40px;
        font-size: 24px;
        border-radius: 10px;
        border: none;
        outline: none;
        text-indent: 10px;
    }

    #stop {
        width: 300px;
        height: 50px;
        color: white;
        pointer-events:auto;/*按钮默认可点击*/
        background-color: blue;
        border: none;
        border-radius: 10px;
        box-shadow:0 20px 5px rgb(0,0,0,.7);
        user-select:none;/*不能选取文本*/
        cursor:pointer;/*鼠标箭头改为小手指*/
        transition:.3s;

    }
    #stop:active{
        box-shadow:0 10px 0px rgb(0,0,0,.7);
        transform:translateY(10px)
    }

    a{/*将a标签做成按钮特效*/
        text-decoration: none;/*a标签去除下划线*/
        margin-top:40px;
        display:block;
        width:120px;
        height:60px;
        color:#fff;
        line-height:60px;
        background-image:linear-gradient(to right,orange,red);
        text-align:center;
        border-radius:14px;
        box-shadow:0 20px 5px rgb(0,0,0,.7);
        user-select:none;
        cursor:pointer;
        transition:.3s;
    }
    a:active{
        box-shadow:0 10px 0px rgb(0,0,0,.7);
        transform:translateY(10px)
    }
</style>

</head>
<!--关于音频录制-->
<body>
    <div class="who"></div>
    <div class="record">
            <div class="row">
                <span>音频名称</span>
                <input type="text" id="title">
            </div>
            <div class="row">
                <span>录制内容</span>
                <audio controls id="track"></audio><!--嵌入音频的标签。加入controls会有控制面板，有播放暂停等功能-->
            </div>
            <div class="row">
                <button id="stop" onclick="finishRecord">停止录制</button>
            </div>
    </div>
    <div>
        <a href="/studio">返回创作中心</a>
    </div>

    <script src="./js/record.js"></script>
    <script src="./js/currentUser.js"></script>
</body>
</html>